<template>
  <div class="addActivity">
    <!-- <showBanner class="white"></showBanner> -->
    <div class="chooseContainer padding-box">
      <el-form
        ref="searchKey"
        :model="searchKey"
        :rules="rules"
        :inline="true"
        style="margin-top:10px;width:100%"
      >
        <div class="formInput">
          <el-form-item
            label="空间名称"
            prop="spaceName"
          >
            <el-input
              placeholder="请输入空间名称"
              v-model="searchKey.spaceName"
              class="chooseBox"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="活动时间"
            prop="time"
          >
            <el-date-picker
              v-model="searchKey.time"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="销售状态"
            prop="status"
          >
            <el-select
              v-model="searchKey.status"
              class="chooseBox"
              filterable
              placeholder="销售状态"
              clearable
            >
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <br>
        <div class="btnBox">
          <el-button
            type="primary"
            class="btnAdd"
            @click="addActivity"
          >+发布活动</el-button>
          <div class="btnSearch">
            <el-button
              type="primary"
              @click="searchSpace"
            >搜索</el-button>
            <el-button @click="spaceClear('searchKey')">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="padding-box">
      <el-table
        :data="activityData"
        style="width: 100%"
        v-loading="loadingTable"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        empty-text="暂无相关活动"
      >
        <el-table-column
          prop="title"
          label="活动标题"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="spaceName"
          label="空间名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="activityTime"
          label="活动时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="validity"
          label="有效期"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="total"
          label="总数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="startAt"
          label="起售"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="purchasing"
          label="限售"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cumulativeSold"
          label="累计已售"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cumulativeUsed"
          label="累计已用"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row.status === 0"
              style="width:60px;margin:0 auto;"
            >
              <span>未开始</span>
            </div>
            <div
              v-if="scope.row.status === 1"
              style="width:60px;margin:0 auto;"
            >
              <span>销售中</span>
            </div>
            <div
              v-if="scope.row.status === 2"
              style="width:60px;margin:0 auto;"
            >
              <span>已结束</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editActivity(scope.row)"
              size="mini"
            >修改</el-button>
            <el-button
              type="text"
              size="mini"
              @click="seeDetail(scope.row)"
            >查看详情</el-button>
            <el-button
              type="text"
              @click="delActivity(scope.row)"
              size="mini"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="pageContainer"
        style="padding-bottom:30px"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="this.pageSizeArray"
          :page-size="this.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="删除活动"
      :visible.sync="dialogVisibleDel"
      :modal="zhezhao"
      width="30%"
    >
      <span>是否删除该活动</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisibleDel = false">取消</el-button>
        <el-button
          type="primary"
          @click="delDialog"
        >确定</el-button>
      </span>
    </el-dialog>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import version from '@/base/version/version'
import showBanner from '@/base/showBanner/showBanner'
import { pageCommon } from '@/assets/js/mixin'
export default {
  name: 'addSpace',
  components: {
    showBanner,
    version
  },
  mixins: [pageCommon],
  data () {
    return {
      activityData: [
      ],
      loadingTable: true,
      dialogVisibleDel: false,
      zhezhao: false,
      searchKey: {
        spaceName: '',
        time: '',
        status: ''
      },
      rules: {},
      stateList: [
        {
          text: '未开始',
          value: 0
        },
        {
          text: '销售中',
          value: 1
        },
        {
          text: '已结束',
          value: 2
        }
      ]
    }
  },
  watch: {
    pageSize (newVal, oldVal) {
      if (this.pageTotal > newVal) {
        this.searchBtn()
        return false
      }
      if (this.pageTotal < oldVal) {
        return false
      }
      this.searchBtn()
    },
    total (val) {
      if (val === 1) {
        this.isShowPage = false
      } else {
        this.isShowPage = true
      }
    }
  },
  created () {
    this.role = this.userInfo.roleId
    // console.log(this.userInfo.userId)
    // if (!this.noReadayLoading) {
    //   this.searchBtn()
    // }
  },
  mounted () {
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.searchBtn()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.searchBtn()
    },
    // 添加活动
    addActivity () {
      this.$router.push({ name: 'activityControl/addActivity' })
    },
    // 修改活动
    editActivity (row) {
      this.$router.push({ name: 'activityControl/editActivity', query: { id: row.id } })
    },
    // 删除活动
    delActivity (row) {
      this.dialogVisibleDel = true
      this.id = row.id
    },
    // 删除弹窗
    delDialog (row) {
      this.$axios.post('/api/activity/deleteActivityById', {
        id: this.id,
        userId: this.userInfo.userId
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.searchBtn()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.dialogVisibleDel = false
    },
    searchBtn () {
      this.$axios.post('/api/activity/showActivitiesByCondition',
        {
          userId: this.userInfo.userId,
          spaceName: this.searchKey.spaceName,
          time: this.searchKey.time,
          status: this.searchKey.status,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      ).then(response => {
        const res = response.data
        // console.log(res)
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.data.activities
          // console.log(arr)
          let activityList = []
          for (let i = 0; i < arr.length; i++) {
            activityList.push({
              id: arr[i].id,
              title: arr[i].title,
              spaceName: arr[i].spaceName,
              activityTime: arr[i].activityTime.substring(2, 12) + '~' + arr[i].activityTime.substring(15, 25),
              validity: arr[i].validity.substring(2, 12) + '~' + arr[i].validity.substring(15, 25),
              total: arr[i].total,
              startAt: arr[i].startAt,
              purchasing: arr[i].purchasing,
              cumulativeSold: arr[i].cumulativeSold,
              cumulativeUsed: arr[i].cumulativeUsed,
              status: arr[i].status
            })
          }
          this.activityData = [...activityList]
          this.total = res.data.total
        }
      })
    },
    searchSpace () {
      this.$axios.post('/api/activity/showActivitiesByCondition',
        {
          userId: this.userInfo.userId,
          spaceName: this.searchKey.spaceName,
          time: this.searchKey.time,
          status: this.searchKey.status,
          pageNo: 1,
          pageSize: this.pageSize
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.data.activities
          // console.log(arr)
          let activityList = []
          for (let i = 0; i < arr.length; i++) {
            activityList.push({
              id: arr[i].id,
              title: arr[i].title,
              spaceName: arr[i].spaceName,
              activityTime: arr[i].activityTime.substring(2, 12) + '~' + arr[i].activityTime.substring(15, 25),
              validity: arr[i].validity.substring(2, 12) + '~' + arr[i].validity.substring(15, 25),
              total: arr[i].total,
              startAt: arr[i].startAt,
              purchasing: arr[i].purchasing,
              cumulativeSold: arr[i].cumulativeSold,
              cumulativeUsed: arr[i].cumulativeUsed,
              status: arr[i].status
            })
          }
          this.activityData = [...activityList]
          this.total = res.data.total
        }
      })
    },
    seeDetail (row) {
      this.$router.push({ name: 'activityControl/activityDetail', query: { id: row.id } })
    },
    spaceClear (searchKey) {
      this.$nextTick(() => {
        if (this.$refs[searchKey] !== undefined) {
          this.$refs[searchKey].resetFields()
          console.log(this.searchKey.time)
          this.searchKey.time = ''
        }
        this.searchBtn()
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
  .btnBox
    display flex
    justify-content space-between
  .formInput
    display flex
    justify-content space-between
    .btnSearch
      // margin-left 200px
</style>
